<template>
  <div class="bg-container">
    <Header/>
    <Left>
      <Lefton></Lefton>
    </Left>
    <Right>
      <Righton></Righton>
    </Right>
    <!-- <iframe src="http://3dwebgl.yn-link.cloud/sanguan/index.html?host=http://8.134.18.217:9999&token=579b859c-8d15-450e-aca7-4a085fd76d7f&project_id=21&stage_id=9&resource_id=28&show_type=1&stage_name=005&" scrolling="no" frameborder="0" ref="unity"></iframe> -->
    <div class="uTable">
      <el-tabs class="demo-tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.value">{{ item.label }}</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import Header from './components/header.vue'
import Left from './components/left.vue'
import Right from './components/right.vue'
/** Left components */
import Lefton from './components/left/index.vue'
/** right components */
import Righton from './components/right/index.vue'

const activeName = ref('0')
const tabList = reactive([
  {label:'施工视图',value:'0'},
  {label:'造楼机视图',value:'1'},
  {label:'设备视图',value:'2'},
  {label:'平面楼层',value:'3'},
])
const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>

<style lang='scss' scoped>
.bg-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  iframe{
    width:100%;
    height: 100%;
  }
  .uTable{
    width: 60%;
    height: 170px;
    background: #ffffff56;
    position: absolute;
    bottom: 5%;
    left: 20%;
    .tableList{
      height: 50px;
      border-bottom: 1px solid #fff;
    }
  }
}
:deep(.el-tabs__item){
  color: #fff !important;
}
:deep(.el-tabs__item.is-top:nth-child(2)){
  padding-left: 20px !important;
}
:deep(.el-tabs__item.is-active){
  color: #00FFDC !important;
}
:deep(.el-tabs__active-bar){
  background-color:#00FFDC !important
}
:deep(.demo-tabs > .el-tabs__content) {
  margin:0 41px;
}
</style>
